<template>
  <div class="wrap">
    <!-- 顶部：返回 + 标题 -->
    <div class="header">
      <a-button type="link" class="back" @click="goBack">
        <template #icon>
          <LeftOutlined />
        </template>
        返回
      </a-button>
      <span class="title">详情</span>
    </div>

    <!-- 内容 -->
    <div class="body">
      <div class="row">
        <div class="label">名称：</div>
        <div class="value">{{ detail.name || "-" }}</div>
      </div>

      <div class="row">
        <div class="label">应用频道：</div>
        <div class="value">{{ detail.channel || "-" }}</div>
      </div>

      <div class="row">
        <div class="label">启用状态：</div>
        <div class="value">
          <a-radio-group :value="detail.enabled" disabled>
            <a-radio :value="true">启用</a-radio>
            <a-radio :value="false">停用</a-radio>
          </a-radio-group>
        </div>
      </div>

      <div class="row">
        <div class="label">上线时间：</div>
        <div class="value">{{ detail.onlineAt || "-" }}</div>
      </div>
    </div>

    <!-- 底部：编辑 / 返回 -->
    <div class="footer">
      <div class="btns">
        <a-button type="primary" @click="goEdit">编 辑</a-button>
        <span class="divider" />
        <a-button @click="goBack">返 回</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import { getDefaultKeywordById } from "@/api/modules/default-search-keyword";
import { getItems } from "@/api/directus";

const route = useRoute();
const router = useRouter();

/** 兼容旧数据的本地中文映射 */
const CHANNEL_ZH: Record<string, string> = {
  news: "新闻",
  text: "网页",
  web: "网页",
  video: "视频",
  image: "图片",
};
function toChannelZh(v?: string) {
  const raw = (v ?? "").trim();
  if (!raw) return "-";
  return CHANNEL_ZH[raw] ?? raw;
}


const COLLECTION_VERTICAL_CATEGORY = "vertical_category" as const;
async function resolveChannelLabelByValue(val?: string) {
  const raw = (val ?? "").trim();
  if (!raw) return "-";
  try {
    const { data } = await getItems<{ id: number | string; query?: string; value?: string }>(
      COLLECTION_VERTICAL_CATEGORY,
      {
        limit: 1,
        fields: ["query", "value"],
        filter: { value: { _eq: raw } },
      }
    );
    const hit = data?.[0];
    if (hit?.query) return hit.query;       
    return toChannelZh(raw);                
  } catch {
    return toChannelZh(raw);
  }
}

/** 格式化时间：YYYY-MM-DD HH:MM:SS */
function fmtYmdHms(iso?: string) {
  if (!iso) return "-";
  const d = new Date(iso);
  if (isNaN(d.getTime())) return "-";
  const pad = (n: number) => String(n).padStart(2, "0");
  const yyyy = d.getFullYear();
  const MM = pad(d.getMonth() + 1);
  const dd = pad(d.getDate());
  const HH = pad(d.getHours());
  const mm = pad(d.getMinutes());
  const ss = pad(d.getSeconds());
  return `${yyyy}-${MM}-${dd} ${HH}:${mm}:${ss}`;
}

const detail = reactive({
  id: "" as string | number | "",
  name: "",
  channel: "",
  enabled: true,
  onlineAt: "-",
});

function goBack() {
  router.back();
}
function goEdit() {
  if (!detail.id) return;
  router.push({
    name: "defaultSearchTermPage",
    query: { id: String(detail.id), backTo: "list" },
  });
}

onMounted(async () => {
  const id = route.query.id as string | undefined;
  if (!id) {
    message.warning("缺少 id");
    return;
  }
  try {
    const d = await getDefaultKeywordById(id);
    detail.id = d?.id ?? id;
    detail.name = d?.query ?? "";
    detail.channel = await resolveChannelLabelByValue(d?.sence as string);
    detail.enabled = (d?.status ?? "published") === "published";
    detail.onlineAt = fmtYmdHms(d?.date_created);
  } catch (e: any) {
    message.error(e?.message || "获取详情失败");
  }
});
</script>

<style scoped>
/* 容器 */
.wrap {
  min-height: 100vh;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

/* 头部 */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.back {
  padding-left: 0;
  color: #8c8c8c;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
}

/* 内容区 */
.body {
  padding: 16px 95px 24px;
  max-width: 760px;
}

.row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 8px 0;
}

.label {
  color: #1f1f1f;
}

.value {
  color: #1f1f1f;
}

/* 底部按钮：居中 */
.footer {
  border-top: 1px solid #f0f0f0;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
}

.btns {
  display: flex;
  align-items: center;
}

.divider {
  width: 1px;
  height: 18px;
  background: #f0f0f0;
  margin: 0 12px;
  display: inline-block;
}

/* 小屏自适应 */
@media (max-width: 640px) {
  .row {
    grid-template-columns: 1fr;
  }

  .label {
    color: #8c8c8c;
  }
}
</style>
